@import "../../style/public";

.goods-data-list {
  .ts-popup {
    @include remCalc(width, 400);
    @include remCalc(padding, 10);
    @include remCalc(border-radius, 8);
  }

  .tsContent {
    @include remCalc(padding, 20, 40);
    @include remCalc(font-size, 24);
    color: #666;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(margin, 0, 0, 10);
      color: #333;
    }
  }
  .chart-box {
    @include remCalc(padding, 40, 10);
    background: #fff;
    @include thin-border(true, false);
    .title {
      @include remCalc(padding, 0, 20);
      @include remCalc(font-size, 32);
      color: #333;
      display: flex;
      align-items: center;
      i {
        @include remCalc(font-size, 30);
        color: #ccc;
        @include remCalc(margin-left, 10);
      }
    }
    .line-wrap{
    }
  }
  .tab-chart {
    @include remCalc(margin, 40,auto,20,auto);
    display: flex;
    @include remCalc(width, 462);
    @include remCalc(border-radius, 10);
    overflow: hidden;
    border: 1px solid $color-red;
    @include remCalc(font-size, 28);
    > li {
      @include remCalc(line-height, 54);
      flex: 1;
      text-align: center;
      background: #fff;
      color: $color-red;
      &.active {
        background: $color-red;
        color: #fff;
      }
    }
  }
  .filter-box {
    @include remCalc(padding, 0, 0, 0, 30);
    background: #fff;

    li {
      @include remCalc(line-height, 88);
      @include remCalc(padding, 0, 30, 0, 0);
      display: flex;
      justify-content: space-between;
      align-items: center;
      @include remCalc(font-size, 30);
      color: #333333;
      @include thin-border(false, false, bottom);
      i {
        @include remCalc(font-size, 30);
        color: #ccc;
      }
      &::first-child {
        &::after {
          display: none;
        }
      }
    }
  }
  .tab-bar {
    display: flex;
    @include remCalc(line-height, 88);
    @include remCalc(padding, 0, 30);
    @include remCalc(margin, 20, 0, 0, 0);
    @include remCalc(font-size, 32);
    color: #333333;
    background: #fff;
    @include thin-border(true, false);
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    justify-content: space-around;
    box-sizing: border-box;

    > li {
      &:first-child {
        padding-left: 0;
      }
      &.active {
        color: $color-red;
        span {
          &::after {
            background: $color-red;
          }
        }
      }
      span {
        height: 100%;
        display: inline-block;
        position: relative;
        &::after {
          content: "";
          width: 100%;
          @include remCalc(height, 4);
          background: transparent;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 2;
        }
      }
    }
  }
  .list-box {
    > li {
      background: #fff;
      @include remCalc(margin-bottom, 20);
      @include remCalc(padding-left, 30);
      @include thin-border(true, false);
      .top {
        @include remCalc(padding, 30, 30, 20, 0);
        display: flex;
        @include thin-border(false, false, bottom);
        .left {
          @include remCalc(width, 120);
          @include remCalc(height, 120);
          @include remCalc(border-radius, 4);
          @include remCalc(margin-right, 20);
          object-fit: cover;
        }
        .right {
          @include remCalc(font-size, 32);
          .goods-name {
            color: #333333;
            @include remCalc(width, 518);
            @extend %text-overflow;
          }
          .price {
            color: #f5364e;
            @include remCalc(padding, 10, 0, 6, 0);
          }
          .count-box {
            @include remCalc(font-size, 24);
            @include remCalc(height, 32);
            color: #999;
            position: relative;
            i {
              @include remCalc(margin-right, 10);
            }
            .stock {
              position: absolute;
              @include remCalc(left, 0);
            }
            .salecount {
              position: absolute;
              @include remCalc(left, 246);
            }
          }
        }
      }
      .middle {
        @include thin-border(false, false, bottom);
        .title {
          color: #333;
          @include remCalc(font-size, 28);
          @include remCalc(padding, 20, 30, 10, 0);
        }
        .board-list {
          display: flex;
          justify-content: flex-start;
          @include remCalc(margin-left, -30);
          > li {
            flex: 1;
            text-align: center;
            > span {
              color: #999;
              @include remCalc(font-size, 24);
            }
            > div {
              color: #333;
              @include remCalc(font-size, 30);
              @include remCalc(padding, 20, 24);
            }
          }
        }
      }
      .bottom {
        @include remCalc(padding, 20, 30);
        display: flex;
        justify-content: flex-end;
        .btn {
          text-align: center;
          color: $color-red;
          @include remCalc(font-size, 28);
          @include remCalc(margin-left, 50);
          display: flex;
          align-items: center;
          i {
            color: #ccc;
          }
        }
      }
    }
  }
  .btn-add {
    @include remCalc(line-height, 88);
    text-align: center;
    @include remCalc(font-size, 36);
    color: #fff;
    background: $color-red;
  }
}
.cancelVerifi-list{
  @extend .goods-data-list;
  .list-box {
    > li {
      background: #fff;
      @include remCalc(margin-bottom, 20);
      @include remCalc(padding-left, 30);
      @include thin-border(true, false);
      .top {
        @include remCalc(padding, 30, 30, 20, 0);
        display: flex;
        @include thin-border(false, false, bottom);
        .left {
          @include remCalc(width, 120);
          @include remCalc(height, 120);
          @include remCalc(border-radius, 4);
          @include remCalc(margin-right, 20);
          object-fit: cover;
        }
        .right {
          @include remCalc(font-size, 32);
          .goods-name {
            color: #333333;
            @include remCalc(width, 518);
            @extend %text-overflow;
          }
      .date,.count{
        @include remCalc(font-size, 24);
        color:#999;
      }
      .date{
        @include remCalc(padding, 8,0);
      }
        }
      }
    
    }
  }
}
.txt-blue{
  color:$color-red;
}
.cancelVerifi-details{
  .details-box{
  background: #fff;
    @include thin-border(true, false);
    @include remCalc(margin-bottom, 20);
    @include remCalc(padding, 20,30);
    &:first-child{
      &::before{
        display: none;
      }
    }
    .title{
      @include remCalc(font-size, 32);
      @include remCalc(padding, 10,0);
      color:#333;
    }
    >li{
      display: flex;
      @include remCalc(padding, 10,0);
      >span{
        @include remCalc(padding-right, 30);
        @include remCalc(font-size, 28);
        color:#999;
      }
      >div{
        @include remCalc(font-size, 28);
        color:#333;
        text-align: right;
        flex:1;
      }
    }
  }
}
.cancelVerifi{

  .btn-wrap{
    @include remCalc(margin,60,0);
  }
  .form-style{
    @include remCalc(margin,0,0,20,0);
    li{
      .disabled{
        color:#999;
      }
    }
  }
  
  .num-box {
    @include remCalc(margin, -4, 0);
    display: flex;
    align-items: center;
    > i {
      @include remCalc(font-size, 46);
      &.activeClass {
        color: #459dff;
      }
      &.disabledClass {
        color: #ddd;
      }
    }
    .buy-num {
      color: #333;
      text-align: center;
      @include remCalc(width, 70);
      @include remCalc(padding, 0, 10);
      @include remCalc(font-size, 32);
    }
  }
}
.result{
  .form-style{
    @include remCalc(margin-top, 20);
  }
  .btn-box {
    display: flex;
    @include remCalc(padding, 60,74);
    justify-content: space-between;
    > div {
      @include remCalc(border-radius, 4);
      @include remCalc(width, 280);
      @include remCalc(line-height, 88);
      text-align: center;
      @include remCalc(font-size, 36);
      background: #fff;
      color: $color-red;
      border:1px solid $color-red;
      &.primary {
        background: $color-red;
        color: #fff;
      }
    }
  }
}